<template>
  <div class="body-box">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane name="0">
        <span slot="label">
          全部
          <span class="tab-badge">{{all}}</span>
        </span>
      </el-tab-pane>
      <el-tab-pane name="1">
        <span slot="label">
          未回复
          <span class="tab-badge">{{no_replay}}</span>
        </span>
      </el-tab-pane>
    </el-tabs>
    <div v-if="!load && list.data.length == 0" class="eval-empty">暂无任何评论</div>
    <el-card shadow="never" class="eval-list" v-for="(item,key) in list.data" :key="key">
      <div class="eval-user-info">
        <img class="eval-user-headurl" :src="item.user_info.Avatar" >
        <span>{{item.user_info.MemberName}}</span>
        <div class="ecal-level">
        <el-rate v-model="item.level" disabled></el-rate>
      </div>
      </div>
      <div class="eval-info-content">{{item.content}}</div>
      <div class="eval-info-time">
        <span>{{item.create_time}}</span>
        <!-- <el-button type="text" size="mini" icon="el-icon-delete" @click="showEval(item.id,key)" v-if="item.state == 1">隐藏</el-button>
        <el-button type="text" size="mini" icon="el-icon-view" @click="showEval(item.id,key)" v-else>显示</el-button>
        <el-button type="text" size="mini" icon="el-icon-edit" v-if="item.is_replay == 0 && replay_index != key" @click="replay(key)">回复</el-button>
        <el-button type="text" size="mini" icon="el-icon-close" v-if="item.is_replay == 0 && replay_index == key" @click="replay(key)">关闭</el-button> -->
      </div>
      <div class="eval-reply-form" v-if="replay_index == key ">
        <div>@{{item.user_info.MemberName}}</div>
        <div class="eval-replay-textarea">
          <el-input type="textarea" v-model="replay_content" :autosize="{ minRows: 5, maxRows: 5}" placeholder="请输入回复内容" maxlength="200" show-word-limit></el-input>
        </div>
        <div class="eval-replay-sbmit">
          <el-button size="mini" icon="el-icon-edit" class="com-btn" @click="replaySubmit()">回复</el-button>
        </div>
      </div>
      <div v-if="!item.is_apply">
        <div class="eval-reply-form eval-replay-infos" v-for="(items,keys) in item.child" :key="keys">
          <div>@{{item.user_info.MemberName}}：{{items.content}}</div>
          <div class="eval-info-time">
            <span>{{items.create_time}}</span>
          </div>
        </div>
      </div>
    </el-card>
    <div class="page-box">
      <el-pagination
        background
        small
        :current-page="list.current_page"
        :page-size="list.per_page"
        layout="total, prev, pager, next, jumper"
        :total="list.total"
        @current-change="changePage"
      ></el-pagination>
      
    </div>
  </div>
</template>

<script>
export default {
  props:{active_id : {}},
  data() {
    return {
      activeName: "0",
      list : {
        current_page : 1,
        per_page:10,
        total:20,
        data : [
          { 
            level:1,
            user_info:{
              Avatar:require('../../../assets/img/logo.png'),
              MemberName:'dqfd'
            },
            child:[
              {
                content:'fsfjif '
              }
            ],
            content:'wdffqw',
            create_time:'2020-12-15'
          },
          { 
            level:1,
            user_info:{
              Avatar:require('../../../assets/img/logo.png'),
              MemberName:'dqfd'
            },
            child:[
              {
                content:'fsfjif '
              }
            ],
            content:'wdffqw',
            create_time:'2020-12-15'
          }
        ]
      },
      replay_index : -1,
      replay_content : '',
      all : 0,
      no_replay : 0,
      load : true
    };
  },
  mounted(){
    // this.getData();
  },
  methods: {
    handleClick(e){
      console.log(e.index)
    },
    //显示隐藏
    // showEval(id,key){
    //   this.ajaxs('active/showEval',{
    //     data:{id : id},
    //     success:(res) =>{
    //       this.toast(res.code,res.msg);
    //       if(res.code) {
    //         this.list.data[key].state = this.list.data[key].state == 1 ? 0 : 1;
    //       }
    //     }
    //   });
    // },
    //获取评论列表
    // getData(){
    //   this.load = true;
    //   this.ajaxs('active/evalList',{
    //     data : {page : this.list.current_page , active_id : this.active_id , apply:this.activeName},
    //     success:(res) => {
    //       this.load = false;
    //       this.list = res.msg.list;
    //       this.all = res.msg.all;
    //       this.no_replay = res.msg.no_replay;
    //     }
    //   });
    // },
    //分页
    changePage(e){
      this.list.current_page = e;
    },
    // //回复
    // replay(key){
    //   if(this.replay_index == key) return this.replay_index = -1;
    //   this.replay_index = key;
    //   this.replay_content = '';
    // },
    // //提交回复
    // replaySubmit(){
    //   if(!this.replay_content)return this.toast(0,'请输入回复内容');
    //   var eval_id = this.list.data[this.replay_index].id;
    //   this.ajaxs('active/replayEval',{
    //     data:{eval_id : eval_id , content : this.replay_content},
    //     success:(res) => {
    //       this.toast(res.code,res.msg);
    //       if(res.code){
    //         this.replay_index = -1;
    //         this.replay_content = '';
    //          this.getData();
    //       }
    //     }
    //   });
    // },
    // /**
    //  * 删除评论
    //  */
    // deleteEval() {
    //   this.$confirm("确认删除该条评论?", "提示", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning"
    //   })
    //     .then(() => {
    //       this.$message({
    //         type: "success",
    //         message: "删除成功!"
    //       });
    //     })
    //     .catch(() => {
    //       this.$message({
    //         type: "info",
    //         message: "已取消删除"
    //       });
    //     });
    // }
  }
};
</script>

<style>
.eval-list{border-color:transparent;border-bottom-color: #f1f1f1}
.eval-user-info{width: 100%;height: 30px;line-height: 30px !important;overflow: hidden;}
.eval-user-headurl{width: 30px;height:30px;border-radius: 50%;float: left;}
.eval-user-info > span{font-size: 14px;float: left;margin-left: 10px;font-weight: bold;}
.ecal-level{float: right;height: 30px;line-height: 30px !important;}
.ecal-level .el-rate i{line-height: 30px !important;}
.eval-info-content{line-height: 20px;padding:10px 0;padding-left: 40px;}
.eval-info-time{font-size: 12px;text-align: right;color: #999;padding-left: 40px;overflow: hidden;}
.eval-info-time > span{float: left;line-height: 28px;}
.eval-reply-form{width: 100%;height: 210px;background: #f8f8f8;margin-top: 10px;padding: 10px;width: calc(100% - 40px);margin-left: 40px;overflow: hidden;}
.eval-replay-textarea{margin-top:10px;}
.eval-replay-textarea textarea{resize: none !important;}
.eval-replay-textarea textarea:focus{outline: none !important;}
.eval-replay-sbmit{text-align: right;margin-top: 10px;}
.eval-replay-infos{height: auto;}
.eval-replay-infos .eval-info-time{padding: 0;margin-top: 15px;}
.eval-empty{color:#999;padding:10px 0;text-align: center;border-bottom: 1px solid #e1e1e1;padding-bottom: 30px;}
</style>